<template>
  <div>
    <!-- 轮播图下导航栏 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="v in channel"
        :key="v.id"
        :icon="v.icon_url"
        :text="v.name"
        @click="fun(v.id)"
      />
    </van-grid>
    <!-- 品牌制造商 -->
    <div class="product">
      <h3>品牌制造商直供</h3>
      <ul>
        <li v-for="v in brandList" :key="v.id" @click="tiao(v.id)">
          <img :src="v.pic_url" alt="" />
          <div class="list_txt">
            <h5>{{ v.name }}</h5>
            <p>{{ v.floor_price | fil }}</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 实现新品首发 -->
    <div class="newGoodsList">
      <h3>周一周四·新品首发</h3>
      <ul class="newGoodsList_list">
        <li v-for="v in newGoodsList" :key="v.id" @click="f2(v.id)">
          <img :src="v.list_pic_url" alt="" />
          <h5>{{ v.name }}</h5>
          <p>{{ v.retail_price | fil }}</p>
        </li>
      </ul>
    </div>

    <!-- 实现人气推荐 -->
    <div class="hotGoodslist">
      <h3>人气推荐</h3>
      <van-card
        v-for="v in hotGoodsList"
        :key="v.id"
        :price="v.retail_price | fil"
        :desc="v.goods_brief"
        :title="v.name"
        :thumb="v.list_pic_url"
        currency=""
        @click="f3(v.id)"
      />
    </div>
    <!-- 专题精选 -->
    <div class="topicList">
      <h3>专题精选</h3>
      <div class="topicList_pro">
        <van-swipe :loop="false" :width="300" :show-indicators="false">
          <van-swipe-item v-for="v in topicList" :key="v.id">
            <img :src="v.scene_pic_url" alt="" />
            <div class="van-ellipsis topicList_pro_text">
              {{ v.title }} <span>{{ v.price_info | fil }}起</span>
              <p>{{ v.subtitle }}</p>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 实现居家 九大类 -->
    <div class="categoryList">
      <div class="categoryList_pro" v-for="v in categoryList" :key="v.id">
        <h3>{{ v.name }}</h3>
        <ul>
          <li v-for="v in v.goodsList" :key="v.id" @click="f4()">
            <img :src="v.list_pic_url" alt="" />
            <h5>{{ v.name }}</h5>
            <p>{{ v.retail_price | fil }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "Goods",
  props: [
    "channel",
    "brandList",
    "newGoodsList",
    "topicList",
    "hotGoodsList",
    "categoryList",
    "goodsList",
  ],
  data() {
    return {};
  },

  methods: {
    fun(v) {
      // console.log(v);
      this.$router.push({
        path: "/Tabnav",
        query: {
          id: v,
        },
      });
    },
    tiao(k) {
      // console.log(k);
      this.$router.push({
        path: "/brand",
        query: {
          id: k,
        },
      });
    },
    f2(k) {
      // console.log(k);
      this.$router.push({
        path: "/goodsDetail",
        query: {
          id: k,
        },
      });
    },
    f3(k) {
      // console.log(k);
      this.$router.push({
        path: "/goodsDetail",
        query: {
          id: k,
        },
      });
    },
    f4() {
      Toast.fail('不卖,说啥不卖!');
    },
  },
  filters: {
    fil(v) {
      let string = v.toFixed(2);
      let str = "￥ " + string + "元";
      return str;
    },
  },
};
</script>

<style lang="less" scoped>
</style>